import React from 'react'
import { useState, useEffect } from 'react'
import { ArrowLeft } from '@react-vant/icons';
import style from '../styles/lx.module.css'
import { useNavigate } from 'react-router-dom'
import dayjs from 'dayjs';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
export default function List3() {
    let navigate = useNavigate()
    let [list, setList] = useState([])
    useEffect(() => {
        getpay()
    },[])
    //获取缴费记录
    let getpay=async()=>{
        let {data:{code,data}}=await axios.get('/lx/paylist1')
        if(code===200){
            setList(data)
        }
    }
    return (
        <div className={style.html4}>
            <div className={style.pp}>
                <ArrowLeft onClick={() => navigate('/list')}></ArrowLeft>
                <span style={{ marginLeft: "3.2rem" }} >缴费记录</span>
            </div>
            {
                list.map(item => (
                    <div className={`${style.pp1} ${style.content}`} key={item._id}>
                       <img src='/img/用户.png' style={{width:'1rem',height:'1rem'}} alt="" />
                        <div>
                            <p style={{fontWeight:'bold'}}>{item.title}</p>
                            <p style={{fontSize:'0.3rem',marginTop:'0.4rem',color:'gray'}}>{dayjs(item.time).format('MM-DD ')}{item.name}</p>
                        </div>
                        <div>
                            <p> <span style={{color:'red'}}>-{item.price}.00</span> </p>
                        </div>
                    </div>
                ))
            }

        </div>
    )
}
